@<template>
  <div>
      <div class="category" >
        <h2>日漫番剧</h2>
        <div class="imgsbox" v-for='item in animelei1' :key="item.index">
<img class="onee" :src="item.imgUrl" alt="">
<img class="twoo" src="../assets/icon/播放图标.png" alt="" width="70px" height="70px">
        </div>
      </div>
      <div class="category1" >
        <h2>付费番剧</h2>
        <div class="imgsbox1" v-for='item1 in animelei2' :key="item1.index">
<img class="oneee" :src="item1.imgUrl" alt="" >
<img class="twooo" src="../assets/icon/播放图标.png" alt="" width="70px" height="70px">
        </div>
      </div>
      <div class="category2" >
        <h2>国漫番剧</h2>
        <div class="imgsbox2" v-for='item2 in animelei3' :key="item2.index">
<img class="oneeee" :src="item2.imgUrl" alt="">
<img class="twoooo" src="../assets/icon/播放图标.png" alt="" width="70px" height="70px">
        </div>
      </div>
      <div class="category3" >
        <h2>完结番剧</h2>
        <div class="imgsbox3" v-for='item3 in animelei4' :key="item3.index">
<img class="oneeeee" :src="item3.imgUrl" alt="">
<img class="twooooo" src="../assets/icon/播放图标.png" alt="" width="70px" height="70px">
        </div>
      </div>
  </div>
</template>

<script>
export default {
data() {
    return {
         animelei1:'',
         animelei2:'',
         animelei3:'',
         animelei4:''
    }
},
props:{
    zhi1:Object
},
created(){
      this.$axios
      .get("http://localhost:8080/test.json")
      .then((res) => {
       this.animelei1 = res.data.japan.slice(1,6)
       this.animelei2 = res.data.Paidcontent
       this.animelei3 = res.data.NationalComics
       this.animelei4 = res.data.japan.slice(22,29)
      })
      .catch((err) => {
        console.log("失败");
      });
}
}
</script>

<style lang='less'>
.category {
//   border: 1px solid red;
  height: 370px;
  border-radius: 24px;
  margin-top: 40px;
}
.category h2 {
  // margin-top: 20px;
  margin-left: 20px;
  color: var(--TextColor);
  font-family: japan;
}
.imgsbox {
//   border: 1px solid red;
  width: 185px;
  height: 268px;
  margin-left: 60px;
  margin-bottom: 30px;
  border-radius: 12px;
overflow: hidden;
float: left;
}
.imgsbox onee{
    width: 185px;
  height: 260px;
  z-index: 2;
}
        .twoo:hover{
             transform: scale(1.1);
             cursor: pointer;
           opacity: 1;
           transition: 0.8s;
            
        }
 .twoo{
    //  border: 1px solid red;
     z-index: 33;
     margin-top: -170px;
     margin-left: 65px;
     position: absolute;
   opacity: 0;
 }
.category1 {
//   border: 1px solid red;
  height: 370px;
  border-radius: 24px;
  margin-top: -20px;
}
.category1 h2 {
  // margin-top: 20px;
  margin-left: 20px;
  color: var(--TextColor);
  font-family: japan;
}
.imgsbox1 {
//   border: 1px solid red;
  width: 185px;
  height: 260px;
  margin-left: 60px;
  margin-bottom: 30px;
  border-radius: 12px;
overflow: hidden;
float: left;
}
 .oneee{
    width: 185px;
  height: 260px;
  z-index: 2;
}
        .twooo:hover{
             transform: scale(1.1);
             cursor: pointer;
           opacity: 1;
           transition: 0.8s;
            
        }
 .twooo{
    //  border: 1px solid red;
     z-index: 33;
     margin-top: 90px;
     margin-left: -125px;
     position: absolute;
   opacity: 0;
 }
.category2 {
//   border: 1px solid red;
  height: 370px;
  border-radius: 24px;
  margin-top: -20px;
}
.category2 h2 {
  // margin-top: 20px;
  margin-left: 20px;
  color: var(--TextColor);
  font-family: japan;
}
.imgsbox2 {
//   border: 1px solid red;
  width: 185px;
  height: 260px;
  margin-left: 60px;
  margin-bottom: 30px;
  border-radius: 12px;
overflow: hidden;
float: left;
}
 .oneeee{
    width: 185px;
  height: 260px;
  z-index: 2;
}
        .twoooo:hover{
             transform: scale(1.1);
             cursor: pointer;
           opacity: 1;
           transition: 0.8s;
            
        }
 .twoooo{
    //  border: 1px solid red;
     z-index: 33;
     margin-top: 90px;
     margin-left: -125px;
     position: absolute;
   opacity: 0;
 }
.category3 {
//   border: 1px solid red;
  height: 370px;
  border-radius: 24px;
  margin-top: -20px;
}
.category3 h2 {
  // margin-top: 20px;
  margin-left: 20px;
  color: var(--TextColor);
  font-family: japan;
}
.imgsbox3 {
//   border: 1px solid red;
  width: 185px;
  height: 260px;
  margin-left: 60px;
  margin-bottom: 30px;
  border-radius: 12px;
overflow: hidden;
float: left;
}
 .oneeeee{
    width: 185px;
  height: 260px;
  z-index: 2;
}
        .twooooo:hover{
             transform: scale(1.1);
             cursor: pointer;
           opacity: 1;
           transition: 0.8s;
            
        }
 .twooooo{
    //  border: 1px solid red;
     z-index: 33;
     margin-top: 90px;
     margin-left: -125px;
     position: absolute;
   opacity: 0;
 }
</style>